<template>
	<view class="index_pages" >
			
		<view class="index_heart" style="background-position:bottom; background-size: contain;" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/26bda6e679b96e28d8.png)'}">			
			<view class="index_heart_top" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/3ca9906e8f012aab0c.png)'}"></view>
			<!-- <view class="index_heart_bottom"  :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/26bda6e679b96e28d8.png)'}"></view> -->
			<view class="swiper">
				<swiper class="swiper-tall" 
					:indicator-dots="indicatorDots" 
					:autoplay="autoplay" 
					:previous-margin="previousMargin"
					:next-margin="nextMargin" 
					:circular="false" 
					@change="change" 
					:current="swiperCurrentIndex">
					<swiper-item class="swiper-container" v-for="(item,index) in swiperList1" :key="index" :data-year="index">
						<view class="swiper-item" :animation="animationData[index]">
							<view class="pu_item" @tap="itemClick(item)"  :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/261789d5b8a6ea0576.png)'}">
								<view class="pu_back" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/b6fd2fd5b84738a0a4.png)'}"></view>
								<view class="pu_flag" >
									<image class="flag_img" :src="photo_cdn+'zpupload/static/zupu/lable1.png'"></image>
									<view class="ex_title" v-if="item.is_sample==1">例 谱</view>
									<view v-else class="flag_title">{{item.family_name}}</view>
								</view>
								<view class="title">{{item.family_name}}{{item.type | format_pu_type}}</view>
								<view class="title_up" v-if="item.title">{{ item.title }}</view>
								<view class="title_up" v-else>{{   item.family_name }}{{item.type | format_pu_type}}</view>
								<view class="subtitle">创建人({{item.realname}}) </view>
		
								<view class="pu_img" :style="{backgroundImage:'url('+photo_cdn+'zpupload/static/zupu/pushu.png)'}"></view>
								<!-- <view class="swiper_time">{{item.createtime}}</view>
								<view class="calline"></view> -->
								
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view    @tap="tocreatepu()" class="found_pu">立即创建我的家谱</view>									
		</view>
				
		<view class="zupu_join">
			<!-- <view class="join_title">
				<view class="join_img" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230920/e625b331da978863a6.png)'}"></view>
				<view class="join_right">
					<view @tap="look_all" class="rightext">查看全部</view>
					<image class="rightimg" src="/sta1tic/tablet/more.png"></image>
				</view>
			</view> -->
			<!-- <view class="join_found">找族人、寻宗亲</view> -->
			<view class="join_bottom">
				<view class="botleft">
					<view class="leftimg_box">
						<view class="leftimg" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/abe0c5095326e5d4d7.png)'}"></view>
					</view>
					<!-- @click="jump('/pages/zupu/join/join')" -->
					<view class="leftitle"   >
						<view class="find_text"  >信息查询&nbsp;加入族谱</view>
						<view class="find_entry">输入信息，一键加入</view>
					</view>	
				</view>
				<view class="botright" @tap="apply_for">立即加入</view>
			</view>
		</view> 
		
		<login :hidden="isshowlogin" @close="closefun" @loginsucc="loginsucc"></login>
		
		<reference ref="reference"></reference>
		<appupdate ref="appupdate" ></appupdate>
		<!-- <q-tabbar :active="0" :count="[0,0,0,0,0]"></q-tabbar> -->
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	import {familyList,openFamilyList} from "@/utils/api/zupu.js";
	import {
		getUserinfo
	} from "@/utils/api/api.js";
	
	let {
		photo_cdn
	} = config.baseUrl;
	import appupdate from "@/components/appupdate/appupdate.vue";
	
	import {
		Handleqrcode
	} from '@/utils/yicode.js'; //扫码
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	

	export default {
		components:{
			appupdate,
		},
		props: {
			idtype: {
				type:String,
				default(){
					return;
				}
			},
			swiperList:{
				type:Array,
				default(){
					return [];
				}
			}
		}, 
		data() {
			return {
				photo_cdn,
				isshowlogin: false,
				title: 'Hello',
				scrollHeight: 0,
				userInfo: {},
				isshowtop: false,
				statusBarHeight: 0, //通知栏高度
				
				swiperList1: [],
				example_pu:{},
				// judge_list:[],//判断有没有加入族谱
				nav_active:'1',
				
				animationData: {					
					// 0:{},
				},
				title: '',
				indicatorDots: false,
				autoplay: false,
				previousMargin: uni.upx2px(82)+'px',
				nextMargin: uni.upx2px(82)+'px',
				circular: true,
				zoomParam: 1.10,
				swiperCurrentIndex: 0,
				data: [],
				max: 0,
				// tabBars:[
				// 	{
				// 		id:'1',
				// 		imgurl:'zpupload/static/index/my.png',
				// 		imgindexurl:'zpupload/static/index/my_index.png'
				// 	},
				// 	{
				// 		id:'2',
				// 		imgurl:'zpupload/static/index/fain.png',
				// 		imgindexurl:'zpupload/static/index/fian_index.png'
				// 	},{
				// 		id:'3',
				// 		imgurl:'zpupload/static/index/name.png',
				// 		imgindexurl:'zpupload/static/index/name_index.png'
				// 	},{
				// 		id:'4',
				// 		imgurl:'zpupload/static/index/xsk.png',
				// 		imgindexurl:'zpupload/static/index/xsk1.png'
				// 	}
				// ],
			}
		},
		computed: {
			...mapState({
				isinit:state=>state.base.isinit,
				// item_active:state=>state.treedata.item_active,//选中的id
			}),
		},
		watch:{
			swiperList: {
			    handler(newVal,oldVal) {
			      this.swiperList1 = newVal
			    }
			  },
			idtype: { 
				handler(value) {
					if(value == 'nav1'){
						// #ifdef APP-PLUS
						setTimeout(()=>{
							this.$refs.appupdate.update();//请求更新
						},2000)
						// #endif
						this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
						
						let scancodedata = uni.getStorageSync('scancodedata')
						if(scancodedata){
							console.info("处理之前没处理的扫码内容");
							Handleqrcode(scancodedata);//解析扫码
							return false;
						}
								
						
						this.animation = uni.createAnimation();
						this.animation.scale(this.zoomParam).step();
						
						this.updateTreedataItem({val:"",key:'item_active'});
						// this.swiperList1 = [];
						this.FamilyListfun();
						let token = uni.getStorageSync("token")
						if (!token) {
							//暂时不弹出 因为用户一进来 没有任何操作是不可以弹窗登录的
							// #ifdef MP-WEIXIN
							// setTimeout(() => {
							// 	this.isshowlogin = true;
							// }, 1500)
							// #endif
						} else {
							this.getUserinfofun();
						}
					}
				}, 
				immediate: true,//设置为 true 时，第一次进入页面时即监听
				deep: true ,// 深度监听父组件传过来对象变化 
			}
		},
		created() {
			// #ifdef APP-PLUS
			setTimeout(()=>{
				this.$refs.appupdate.update();//请求更新
			},2000)
			// #endif
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			
			let scancodedata = uni.getStorageSync('scancodedata')
			if(scancodedata){
				console.info("处理之前没处理的扫码内容");
				Handleqrcode(scancodedata);//解析扫码
				return false;
			}
		
			
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			
			this.updateTreedataItem({val:"",key:'item_active'});
			// this.swiperList1 = [];
			this.FamilyListfun();
			let token = uni.getStorageSync("token")
			if (!token) {
				//暂时不弹出 因为用户一进来 没有任何操作是不可以弹窗登录的
				// #ifdef MP-WEIXIN
				// setTimeout(() => {
				// 	this.isshowlogin = true;
				// }, 1500)
				// #endif
			} else {
				this.getUserinfofun();
			}
		},
		onLoad(Option) {
			// #ifdef APP-PLUS
			setTimeout(()=>{
				this.$refs.appupdate.update();//请求更新
			},2000)
			// #endif
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			console.info(Option, "Option");
			let scancodedata = uni.getStorageSync('scancodedata')
			if(scancodedata){
				console.info("处理之前没处理的扫码内容");
				Handleqrcode(scancodedata);//解析扫码
				return false;
			}
			console.info(Option, "Option");
			if (Option.q) {
				let jxurl = decodeURIComponent(Option.q)
				uni.setStorageSync('scancodedata',jxurl);//存储起来 防止没登录 登录后要重新请求
				Handleqrcode(jxurl);//解析扫码
				return false;
			}
			//朋友圈和微信分享进来的
			if(Option.type==1 && Option.user_id){
				let ddurl = `xxx.com?type=${Option.type}&imuser_id=${Option.imuser_id}`;
				uni.setStorageSync('scancodedata',ddurl);//存储起来 防止没登录 登录后要重新请求
				Handleqrcode(ddurl);//解析扫码
				return false;
			}
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			// this.animationData[0] = this.animation.export();
			
		},
		onShow() {
			
			// #ifdef APP-PLUS
			setTimeout(()=>{
				this.$refs.appupdate.update();//请求更新
			},2000)
			// #endif
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			console.info(Option, "Option");
			let scancodedata = uni.getStorageSync('scancodedata')
			if(scancodedata){
				console.info("处理之前没处理的扫码内容");
				Handleqrcode(scancodedata);//解析扫码
				return false;
			}
			console.info(Option, "Option");
			if (Option.q) {
				let jxurl = decodeURIComponent(Option.q)
				uni.setStorageSync('scancodedata',jxurl);//存储起来 防止没登录 登录后要重新请求
				Handleqrcode(jxurl);//解析扫码
				return false;
			}
			//朋友圈和微信分享进来的
			if(Option.type==1 && Option.user_id){
				let ddurl = `xxx.com?type=${Option.type}&imuser_id=${Option.imuser_id}`;
				uni.setStorageSync('scancodedata',ddurl);//存储起来 防止没登录 登录后要重新请求
				Handleqrcode(ddurl);//解析扫码
				return false;
			}
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			// this.animationData[0] = this.animation.export();
			this.updateTreedataItem({val:"",key:'item_active'});
			// this.swiperList1 = [];
			this.FamilyListfun();
			let token = uni.getStorageSync("token")
			if (!token) {
				//暂时不弹出 因为用户一进来 没有任何操作是不可以弹窗登录的
				// #ifdef MP-WEIXIN
				// setTimeout(() => {
				// 	this.isshowlogin = true;
				// }, 1500)
				// #endif
			} else {
				this.getUserinfofun();
			}
			
			// //解析二维码
			// //处理扫码
			// let scancodedata = uni.getStorageSync('scancodedata')
			// if(scancodedata){
			// 	console.info("处理之前没处理的扫码内容");
			// 	Handleqrcode(scancodedata);//解析扫码
			// 	// return false;
			// }
		},
		onReady() {
			this.computeheight()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 100) {
				this.isshowtop = true;
			} else {
				this.isshowtop = false;
			}
		},
		onPullDownRefresh() {
			this.getUserinfofun();
			this.swiperList1 = [];
			this.FamilyListfun();
			setTimeout(() => {
				uni.stopPullDownRefresh(); //结束下拉刷新
			}, 1500)
		},
		onShareAppMessage: function() {
			let url = "zpupload/20230804/f82ec5c4948c1f4628.png";
			return {
				title: "探寻家族历史，传承家族精神",
				path: "/pages/index/index",
				imageUrl: photo_cdn+url
			}
		},
		//分享朋友圈
		onShareTimeline() {
			let url = "zpupload/20230804/f82ec5c4948c1f4628.png";
			return {
				title: "探寻家族历史，传承家族精神",
				imageUrl: photo_cdn+url
			}
		},
		methods: {
			...mapMutations(['updatebaseItem','updateTreedataItem']),
			tocreatepu(){
				console.log("123")
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;//显示去登录
					return ;
				} else {
					uni.navigateTo({
						url:'/pages/zupu/createzupu/createzupu'
					})
				}
			},	
			//样谱
			async openFamilyListfun(){
				let res = await openFamilyList({
					
				})
				if(res.code==1){
					res.data.list.forEach(item =>{
						if(item.is_sample==1){
							this.example_pu = item;
						}
					})
										
				}
			},
			
			//跳转
			jump(e){
				uni.navigateTo({
					url: e
				});
			},
			
			async FamilyListfun(){
				await this.openFamilyListfun();
				//source:0我的族谱 source:2 我创建的族谱
				let res =  await familyList({
					source:2,
				})
				let restwo =  await familyList({
					source:0,
				})
				if(res.code==1 && restwo.code==1){
					let datatwo = [];
					for(var i in restwo.data){
						datatwo.push(restwo.data[i])
					}
					this.swiperList1 = [...res.data,...datatwo];
				}else{
					this.swiperList1 = res.data;
				}
				
				if(res.code==1){
					this.swiperList1.push(this.example_pu);//两个数据合并 例谱 一条
					let len = this.swiperList1.length;
					//数组去重
					for(let i=0;i<len;i++){
						for(let j=i+1;j<len;j++){
							if(this.swiperList1[i].id==this.swiperList1[j].id){
								this.swiperList1.splice(j, 1);
								len--;
								j--;
							}
						}
					}						

					//初始化 轮播数据动画
					let animationData = {};
					this.swiperList1.forEach((item,index)=>{
						animationData[index] = {};
					})
					animationData[0] = this.animation.export();
					this.animationData = animationData;
				}
				if(this.isinit){
					console.info('222222');
					this.updatebaseItem({
						key:'isinit',
						val:0,
					})
					// if(this.judge_list.length){
					// 	//自动进入族谱
					// 	uni.navigateTo({
					// 		url:`/pages/zupu/familytrees/familytrees?family_id=${this.judge_list[0].id}&source=1&type=${this.judge_list[0].type}`
					// 	})
					// }
				}
			},
			
			toFamily(item){
				uni.navigateTo({
					url:`/pages/zupu/familytrees/familytrees?family_id=${item.id}`
				})
			},
			computeheight() {
				let resinfo = uni.getSystemInfoSync();
				let windowHeight = resinfo.windowHeight;
				this.scrollHeight = windowHeight;
			},
			itemClick(item) {
				uni.navigateTo({
					url:`/pages/zupu/familytrees/familytrees?family_id=${item.id}`
				})
			},
			//申请入谱
			apply_for(){
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;
					return ;
				}
				this.$refs.reference.open();
			},
			//关闭授权登录弹窗
			closefun() {
				this.isshowlogin = false;
			},
			//登录完成
			loginsucc() {

			},
			getUserinfofun() {
				getUserinfo({

				}).then((res) => {
					this.userInfo = res.data.userinfo;
					uni.setStorageSync("u_userInfo", res.data.userinfo);
				})
			},
			//加入族谱
			join_zupu() {
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;
					return ;
				}
				this.$refs.reference.open();
			},
			//联系传承人
			contactInheritorn(item){
				uni.navigateTo({
					url:`/pagesim/center/info?id=${item.fastim_id}`
				})
			},
			//轮播图
			swiperTab(e){
				this.currentIndex = e.detail.current
			},
			look_all(){
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;//显示去登录
					return ;
				} else{
					uni.navigateTo({
						url:`/pages/zupu/findpu/findpu`
					})
				}			
			},
			//tab切换
			// tabnav(item){
			// 	// if(this.nav_active==item.id){
			// 	// 	return false;
			// 	// }else{
			// 	// 	this.nav_active = item.id
			// 	// }
			// 	// if(this.nav_active==2){
			// 	// 	uni.redirectTo({
			// 	// 		url:'/pages/findpu/findpu'
			// 	// 	})
			// 	// }
			// 	// if(this.nav_active==3){
			// 	// 	uni.redirectTo({
			// 	// 		url:'/pages/celebrity/celebritylist/celebritylist'
			// 	// 	})
			// 	// }
			// },
			//轮播
			change(e) {
				this.swiperCurrentIndex = e.detail.current;
				this.title = e.detail.currentcurrent;
				for (let key in this.animationData) {
					if (e.detail.current == key) {
						this.animation.scale(this.zoomParam).step();
						this.animationData[key] = this.animation.export();
					} else {
						this.animation.scale(1.0).step();
						this.animationData[key] = this.animation.export();
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/pages/index/index.scss";
</style>